<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试v-bind</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id = "root">
        username:<input name="username" v-bind:value="username" type="text"><br/> <!--单向绑定，控制台发生修改。网页伴随着修改，但是不能反过来-->
        password:<input name="password" v-model:value="password" type="text"><br/> <!--双向绑定，控制台发生修改。网页伴随着修改，反之也可以-->

        <!--简写方式-->
        username:<input name="username" :value="username" type="text"><br/> <!--单向绑定，控制台发生修改。网页伴随着修改，但是不能反过来-->
        password:<input name="password" v-model="password" type="text"><br/> <!--双向绑定，控制台发生修改。网页伴随着修改，反之也可以-->

        <!--嵌套对象取值-->
        username:<input name="username" :value="person.username" type="text"><br/> <!--单向绑定，控制台发生修改。网页伴随着修改，但是不能反过来-->
        password:<input name="password" v-model="person.password" type="text"><br/> <!--双向绑定，控制台发生修改。网页伴随着修改，反之也可以-->
    </div>
</body>
<script type="text/javascript">
    var vm = new Vue({
        el: '#root',
        data:{
            username: 'zhonghuan@请求.com',
            password: '1234567',
            person:{
                username: 'zhonghuan@请求.com',
                password: '1234567'
            }
        } 
    })
</script>
</html>